<template>
	<view class="settings padding">
		<view class="cu-list menu sm-border  margin-top'" >
			<view class="cu-item arrow" data-target="DialogModal1" @click="showModal">
				<view class="content">
					<text class="cuIcon-infofill text-grey"></text>
					<text class="text-grey">修改密码</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content padding-tb-sm">
					<text class="cuIcon-noticefill text-grey"></text>
					<text class="text-grey">允许3G/4G网络播放视频</text>
				</view>
				<view class="action">
					<switch @change="SwitchA" :class="switchA?'checked':''" :checked="switchA?true:false"></switch>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-skinfill text-grey"></text>
					<text class="text-grey">清除缓存</text>
				</view>
				<view class="action">
					<text class="text-grey">{{currentSize}}</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="goAboutus">
				<view class="content">
					<text class="cuIcon-settingsfill text-grey"></text>
					<text class="text-grey">关于</text>
				</view>
			</view>
		</view>
		
		
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog" >
				<view class="cu-bar bg-white justify-end">
					<view class="content">修改密码</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<form>
						<view class="cu-form-group margin-top">
							<view class="title">原密码：</view>
							<input placeholder="请输入密码" v-model="oldPassword" type="password" name="input"></input>
						</view>
						<view class="cu-form-group margin-top">
							<view class="title">新密码：</view>
							<input placeholder="请输入密码" v-model="newPassword" type="password" name="input"></input>
						</view>
						<view class="cu-form-group margin-top">
							<view class="title">确认新密码：</view>
							<input placeholder="请输入密码" v-model="newPass" type="password" name="input"></input>
						</view>
					</form>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="changepass">确定</button>
		
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data() {
			return {
				switchA: false,
				modalName: null,
				oldPassword:'',
				newPassword:'',
				newPass:'',
				currentSize:0
			}
		},
		onLoad() {
			this.getLocalInfo()
		},
		methods:{
			SwitchA(e) {
				this.switchA = e.detail.value
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			changepass(){
				if(this.newPassword!==this.newPass){
					this.modalName = null
					uni.showToast({
						title:'输入新密码不一致',
						icon:'loading'
					})
					return
				}
				let old_password = this.oldPassword
				let new_password = this.newPassword
				this.$myRuquest({
					url:'/update_password/',
					method:'POST',
					data:{old_password,new_password}
				}).then(res=>{
					this.modalName = null
					uni.showToast({
						title:'修改成功'
					})
				})
			},
			goAboutus(){
				uni.navigateTo({
					url:'../aboutus/aboutus'
				})
			},
			getLocalInfo(){
				let res = uni.getStorageInfoSync()
				if(res.currentSize<1024){
					this.currentSize = `${res.currentSize}KB`
				}else{
					this.currentSize = `${res.currentSize/1024}MB`
				}
			}
		}
	}
</script>

<style>
</style>
